import {Outlet } from "react-router-dom";
import React, { useState , useEffect } from 'react';
import '../assets/styles/home.scss'
import MainMenu from '@/components/MainMenu'

import { Breadcrumb, Layout } from 'antd';

const { Header, Content, Footer, Sider } = Layout;

const View: React.FC = () => {

  const [collapsed, setCollapsed] = useState(false);

  useEffect(()=>{
    // console.log('123')
  },[])


  return (
    <Layout className='view-home' style={{ minHeight: '100vh' }}>
      {/*左边*/}
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="logo" style={{ backgroundColor : 'rgba(255,255,255,.3)' , }}>logo-xin</div>
        {/*菜单抽离*/}
        <MainMenu></MainMenu>
      </Sider>
      {/*右边*/}
      <Layout className="site-layout">
        <Header className="site-layout-background render-header" style={{ padding: 0 , background : '#eee' }} >
          <div className='breadCrumb'>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>
          </div>
        </Header>
        <Content style={{ margin: '16px 16px' }}>
          <div className="site-layout-background" style={{ padding: 24, minHeight: 360 , background : "#fff"}}>
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>Ant Design UI React18 -Xin</Footer>
      </Layout>
    </Layout>
  );
};

export default View;
